<template>
	<view class="body">
		<xk-header title="看房记录"></xk-header>
		<scroll-view scroll-x="true" class="scroll">
			<view :class="lookRoomData.pi_looking_property_dets.length == 1 ? 'scroll-one' : 'scroll-x'">
				<view v-for="(item, index) of lookRoomData.pi_looking_property_dets" :key="index" class="data-item">
					<view class="item-top">
						<view>物业编号: {{item.property_code}}</view>
					</view>
					<view class="item-middel">
						<image v-if="item.property_image" mode="aspectFill" class="img" :src="item.property_image | formatImgPath('200', '150')"/>
						<image v-else mode="aspectFill" class="img" :src="(imgUrl+'/wx/default_img.jpg')"/>
						<view class="info">
							<view class="top">
								<view class="name">{{item.tag_name || "未知"}}</view>
								<view class="desc">{{item.floor_area}}㎡/{{item.storey}}层/{{item.building}}楼</view>
								<view class="amount">{{(item.pricing_amount * item.floor_area || "") | formatMoneyNo00}}元/月</view>
							</view>
						</view>
					</view>
					<view class="location-view">
						<image mode="aspectFill" class="dingwei" :src="(imgUrl+'/wx/dingwei.png')"/>
						<view class="address">{{item.storey}}层/{{item.building}}楼</view>
						<!-- <view class="address">广州市黄埔区伴河路广州莱迪创新科技园西侧步行约140米科信纳米谷产业园</view> -->
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="list">
			<view class="list-item header" @click="more = !more">
				<view><view class="header-icon"></view>受理信息</view>
				<image v-if="!more" :src="(imgUrl+'/wx/up.png')"></image>
				<image v-else  :src="(imgUrl+'/wx/down.png')"></image>
			</view>
			<view v-if="more">
				<view class="list-item">
					<view>申请单号：{{lookRoomData.apply_no}}</view>
				</view>
				<view class="list-item">
					<view>申请人：{{lookRoomData.apply_user_name}}</view>
				</view>
				<view class="list-item">
					<view>联系号码：{{lookRoomData.contact_phone}}</view>
				</view>
				<view class="list-item">
					<view>单位名称：{{lookRoomData.company_name}}</view>
				</view>
				<view class="list-item">
					<view>租赁用途：{{lookRoomData.apply_lease_purpose}}</view>
				</view>
				<view v-if="lookRoomData.accept_result == '10'" class="list-item">
					<view>接待时间：{{lookRoomData.accept_time}}</view>
				</view>
				<view class="list-item">
					<view>受理意见：{{lookRoomData.accept_remark}}</view>
				</view>
				<view class="list-item">
					<view>受理结果：{{lookRoomData.accept_result == '10' ? '同意' : '拒绝'}}</view>
				</view>
				<view class="list-item">
					<view>受理人：{{lookRoomData.accepted_user_name}}</view>
				</view>
				<view class="list-item">
					<view>受理时间：{{lookRoomData.accepted_date}}</view>
				</view>
			</view>
		</view>

		<view v-if="lookRoomData.jd_status == 'COMPLETE'" class="list">
			<view class="list-item header" @click="doneMore = !doneMore">
				<view><view class="header-icon"></view>登记信息</view>
				<image v-if="!doneMore" :src="(imgUrl+'/wx/up.png')"></image>
				<image v-else  :src="(imgUrl+'/wx/down.png')"></image>
			</view>
			<view v-if="doneMore">
				<view class="list-item">
					<view>租赁用途：{{lookRoomData.purpose}}</view>
				</view>
				<view class="list-item">
					<view>接待时间：{{lookRoomData.check_businessdate}}</view>
				</view>
				<view class="list-item">
					<view>是否有意向：{{lookRoomData.is_intention == '1' ? '是' : '否'}}</view>
				</view>
				<view v-if="lookRoomData.is_intention" class="list-item">
					<view>意向租赁面积：{{lookRoomData.intent_area || '无'}}</view>
				</view>
				<view v-if="lookRoomData.is_intention" class="list-item">
					<view>意向价格：{{lookRoomData.intent_price || '无'}}</view>
				</view>
				<view v-if="lookRoomData.is_intention" class="list-item">
					<view>车位要求：{{lookRoomData.intent_parking || '无'}}</view>
				</view>
				<view v-if="lookRoomData.is_intention" class="list-item">
					<view>环境要求：{{lookRoomData.intent_environment || '无'}}</view>
				</view>
				<view class="list-item">
					<view>客户要求：{{lookRoomData.company_claim || '无'}}</view>
				</view>
				<view v-if="lookRoomData.is_intention" class="list-item">
					<view>需维修部位：{{lookRoomData.need_repair || '无'}}</view>
				</view>
				<view class="list-item">
					<view>客户反馈：{{lookRoomData.register_remark || '无'}}</view>
				</view>
				<view class="list-item">
					<view>登记人：{{lookRoomData.register_user}}</view>
				</view>
				<view class="list-item">
					<view>登记日期：{{lookRoomData.register_date}}</view>
				</view>
			</view>
		</view>

		<view v-if="lookRoomData.jd_status == 'COMPLETE'" class="list">
			<view class="list-item header" @click="visitMore = !visitMore">
				<view><view class="header-icon"></view>回访信息</view>
				<image v-if="!visitMore" :src="(imgUrl+'/wx/up.png')"></image>
				<image v-else  :src="(imgUrl+'/wx/down.png')"></image>
			</view>
			<view v-if="visitMore">
				<view class="list-item">
					<view>是否满足客户需求：{{lookRoomData.is_satisfy == '1' ? '是' : '否'}}</view>
				</view>
				<view v-if="lookRoomData.is_satisfy" class="list-item">
					<view>可出租面积：{{lookRoomData.visit_area || '无'}}</view>
				</view>
				<view v-if="lookRoomData.is_satisfy" class="list-item">
					<view>报价：{{lookRoomData.visit_price || '无'}}</view>
				</view>
				<view v-if="lookRoomData.is_satisfy" class="list-item">
					<view>可提供车位：{{lookRoomData.visit_parking || '无'}}</view>
				</view>
				<view v-if="lookRoomData.is_satisfy" class="list-item">
					<view>客户回访报价：{{lookRoomData.visit_company_price || '无'}}</view>
				</view>
				<view v-if="lookRoomData.is_satisfy" class="list-item">
					<view>回访记录：{{lookRoomData.visit_record || '无'}}</view>
				</view>
				<view class="list-item">
					<view>客户反馈：{{lookRoomData.visit_remark || '无'}}</view>
				</view>
				<view class="list-item">
					<view>回访人：{{lookRoomData.visit_user}}</view>
				</view>
				<view class="list-item">
					<view>回访日期：{{lookRoomData.visit_date}}</view>
				</view>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn" @click="back">返回</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				look_id: '',
				lookRoomData: {
					pi_looking_property_dets: []
				},
				more: true,
				doneMore: true,
				visitMore: true,
			};
		},
		onLoad(options){
			this.look_id = options.lookId;
			this.getLookRoomData()
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			getLookRoomData(){
				this.$api.baseData_getPiLookingRoom(this.look_id).then((res)=>{
					this.lookRoomData = res.piLookingRoom
					console.log('查看房源详情',this.lookRoomData)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.scroll{
	.scroll-x{
		display: inline-flex;
		padding-right: 30rpx;
	}
	.scroll-one{
		.data-item{
			width: 650rpx !important;
		}
	}
}
.data-item {
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 20rpx 0rpx 0rpx 30rpx;
	padding: 20rpx;
	color: #333;
	font-size: 28rpx;
	white-space: normal;
	width: 550rpx;
	.item-top {
		display: flex;
		:first-child {
			flex: 1;
		}
		.del-img {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.item-middel {
		display: flex;
		margin-top: 10rpx;

		.img{
			width: 200rpx;
			height: 150rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.info{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top{
				.name{
					font-size: 28rpx;
					font-weight: bolder;
					color: #333333;
				}
				.desc{
					font-size: 28rpx;
					color: #999999;
				}
				.amount{
					font-size: 36rpx;
					font-weight: bolder;
					color: #FF3737;
				}
			}
		}
	}
	.location-view {
		display: flex;
		margin-top: 20rpx;
		align-items: flex-start;
		border-top: 1px solid #EEEEEE;
		padding-top: 10rpx;
		.dingwei {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
		}
		.address {
			font-size: 24rpx;
			color: #333;
			margin-left: 10rpx;
		}
	}
}

.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		font-size: 28rpx;
		padding: 30rpx 20rpx;
		> view:first-child {
			color: #333333;
		}
		.input-item {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			margin-left: 20rpx;
		}
		.right-title1{
			flex: 1;
			text-align: right;
			color: #333;
		}
		.right-title1-empty {
			color: #ccc;
		}
		.jiantou {
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}
	.textarea{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		textarea{
			margin-top: 20rpx;
			padding: 16rpx 20rpx;
			background-color: #F9F9F9;
			border-radius: 10rpx;
			height: 130rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.list-item2{
		font-size: 28px;
		color: #333333;
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		padding: 22rpx 20rpx;
		:first-child {
			width: 150rpx;
		}
	}
	.header{
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		padding: 30rpx 20rpx  30rpx 0;

		> view:first-child {
			flex: 1;
			display: flex;
			align-items: center;
			color: #333333;
			.header-icon{
				height: 40rpx;
				width: 12rpx;
				border-top-right-radius: 6rpx;
				border-bottom-right-radius: 6rpx;
				background-color: #2C72FF;
				margin-right: 10rpx;
			}
		}
		image{
			width: 24rpx;
			height: 24rpx;
		}
	}
}
.btn-view {
	display: flex;
	justify-content: space-around;
	.btn {
		width: 290rpx;
		height: 88rpx;
	}
}
</style>
